<template>
  <div class="cart fixed-top">
    <NavBar title="我的评论" fixed back/>
    <van-tabs v-model="active" sticky  @click="onClick">
      <van-tab title="待评论" >
        <div v-if="emtpy">
          <EmptyData text="亲，您没有商品可评论哦！"/>
        </div>
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <ul class="comment-ul">
          <li v-for="item in list" :key="item.id">
            <van-card
              :desc="item.goodsProperty"
              :title="item.goodsName"
              :thumb="GLOBAL.baseImagePath + item.imgUrl"
            >
              <div slot="footer">
                <van-button size="mini" @click="onGo(item)">去评论</van-button>
              </div>
            </van-card>
          </li>
        </ul>
        </van-list>
      </van-tab>
      <van-tab title="已评论">
        <div v-if="emtpy">
          <EmptyData text="亲，您没有商品可追评哦！"/>
        </div>
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <ul class="comment-ul">
          <li v-for="item in list" v-bind:key="item.id">
            <div>
            <van-card
              :desc="item.goodsProperty"
              :title="item.goodsName"
              :thumb="GLOBAL.baseImagePath + item.imgUrl"
            >
              <div slot="footer">
                <van-button size="mini" @click="onComment(item.commentId)">查看评论</van-button>
                <van-button size="mini" @click="onGo(item)" v-if="item.commentStatus === 2">去追加</van-button>
              </div>
            </van-card>
            </div>
          </li>
        </ul>
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import NavBar from '../../components/common/NavBar.vue'
import Swiper from '../../components/index/Swiper.vue'
import EmptyData from '../../components/common/EmptyData.vue'
import orderApi from '../../api/order'
import { Toast } from 'vant'
export default {
  data () {
    return {
      query: {
        commentStatus: 1,
        // 当前页
        currentPage: 1,
        // 一页数据量
        pageSize: 5
      },
      total: 0,
      desc: '规格：',
      swiperSize: '',
      gdStatus: '已下架',
      active: '',
      goodsStatus: 1,
      loading: false,
      finished: false,
      list: [],
      emtpy: false,
      cList: false
    }
  },
  computed: {
  },
  methods: {
    handelSwiperSize (value) {
      this.swiperSize = value
    },
    onLoad () {
      if (this.cList) {
        this.cList = !this.cList
        return 0
      }
      this.getList()
    },
    onComment (val) {
      this.$router.push({path: '/comment/commentReply', query: {commentId: val}})
    },
    onGo (val) {
      var status = ''
      if (this.active === 0) {
        status = 2
      } else {
        status = 3
      }
      this.$router.push({path: '/comment/comment', query: {goods: val, status: status}})
    },
    getList () {
      var _this = this
      this.emtpy = false
      orderApi.getCommentGoodsDetail(this.query).then(function (res) {
        if (res.data.status === 0) {
          let list = res.data.re
          if (list !== null && list.length > 0) {
            for (let i = 0; i < list.length; i++) {
              _this.list.push(list[i])
            }
            _this.query.currentPage++
            _this.loading = false
          } else {
            if (_this.query.commentStatus === 2) {
              _this.query.commentStatus = 3
              _this.query.currentPage = 1
              _this.loading = false
            } else {
              _this.loading = false
              _this.finished = true
            }
          }
        } else {
          Toast.fail('获取数据失败')
        }
        if (_this.list === null || _this.list.length < 1) {
          _this.emtpy = true
        } else {
          _this.emtpy = false
        }
      })
    },
    onClick (index) {
      this.finished = false
      this.loading = false
      this.list.splice(0, this.list.length)
      var _this = this
      switch (index) {
        case 0:
          _this.query.commentStatus = 1
          _this.query.currentPage = 1
          break
        case 1:
          _this.query.commentStatus = 2
          _this.query.currentPage = 1
          break
      }
      this.getList()
      this.cList = true
    }
  },
  components: {
    NavBar,
    Swiper,
    EmptyData
  }
}
</script>
<style scoped>
  .van-card {
    background-color: transparent;
  }

  .van-card .van-card__title {
    font-weight: 600!important;
  }

  .comment-ul li{
    background: #fff;
    border-bottom: 1px solid #fafafa;
  }
</style>
<style>
  .cart-emtpy {
    font-size: 12px;
    text-align: center;
    line-height: 200px;
  }
  .cart-card .van-card__thumb {
    width: 90px!important;
    height: 90px!important;
    left: 5px;
  }

  .cart-card .van-card__thumb img {
    width: 90%;
  }
  .cart-card .van-card__footer {
    right: 5px;
  }
  .van-card__footer {
    right: 5px;
  }
</style>
